<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>淘宝风格轮播图</title>
  <style>
    /* 轮播容器 */
    .carousel {
      position: relative;
      max-width: 1200px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* 图片列表 */
    .carousel-inner {
      display: flex;
      transition: transform 0.5s ease;
    }

    /* 单张图片样式 */
    .carousel-item {
      min-width: 100%;
      height: 400px;
      position: relative;
    }

    .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 导航箭头 */
    .carousel-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.8);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }

    .carousel-control:hover {
      background: rgba(255,255,255,1);
    }

    .carousel-control.prev {
      left: 20px;
    }

    .carousel-control.next {
      right: 20px;
    }

    /* 导航点 */
    .carousel-dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

    .carousel-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    .carousel-dot.active {
      background: rgba(255,255,255,1);
      transform: scale(1.2);
    }
  </style>
</head>
<body>
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?auto=format&fit=crop&w=1200&q=80" alt="商品1">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?auto=format&fit=crop&w=1200&q=80" alt="商品2">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1605733513597-a8f8341084e6?auto=format&fit=crop&w=1200&q=80" alt="商品3">
    </div>
  </div>

  <!-- 控制箭头 -->
  <button class="carousel-control prev"><</button>
  <button class="carousel-control next">></button>

  <!-- 导航点 -->
  <div class="carousel-dots">
    <button class="carousel-dot active"></button>
    <button class="carousel-dot"></button>
    <button class="carousel-dot"></button>
  </div>
</div>

<script>
  const carouselInner = document.querySelector('.carousel-inner');
  const items = document.querySelectorAll('.carousel-item');
  const dots = document.querySelectorAll('.carousel-dot');
  let currentIndex = 0;
  let autoPlay = true;
  let interval = 3000; // 3秒自动切换

  // 切换图片
  function goToIndex(index) {
    currentIndex = (index + items.length) % items.length;
    carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;

    // 更新导航点
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === currentIndex);
    });
  }

  // 自动播放
  let timer = setInterval(() => {
    if(autoPlay) goToIndex(currentIndex + 1);
  }, interval);

  // 箭头控制
  document.querySelector('.prev').addEventListener('click', () => {
    goToIndex(currentIndex - 1);
    resetInterval();
  });

  document.querySelector('.next').addEventListener('click', () => {
    goToIndex(currentIndex + 1);
    resetInterval();
  });

  // 导航点控制
  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      goToIndex(index);
      resetInterval();
    });
  });

  // 重置定时器
  function resetInterval() {
    clearInterval(timer);
    timer = setInterval(() => {
      if(autoPlay) goToIndex(currentIndex + 1);
    }, interval);
  }

  // 悬停暂停
  carouselInner.parentElement.addEventListener('mouseenter', () => autoPlay = false);
  carouselInner.parentElement.addEventListener('mouseleave', () => autoPlay = true);
</script>
</body>
</html>